/* layout */
/* common */
    div#wrapper
    {
        width: 100%;
        min-width: 400px;
        z-index: 3;
    }

    div#navigation
    {
        width: 180px;
        z-index: 2;
    }

    div#extra
    {
        width: 180px;
        z-index: 1;
    }

    div#footer
    {
        clear: left;
        width: 100%;
    }

    div#content
    {
        padding: 0px 10px;
    }

    div#content div
    {
        margin: auto;
    }


/* default: 3 columns: extra, content, navigation */
    div#wrapper
    {
        float: left;
    }

    div#content
    {
        margin: 0px 180px 0px 180px;
    }

    div#navigation
    {
        float: left;
        margin-left: -180px;
    }

    div#extra
    {
        float: left;
        margin-left: -100%;
    }

/* 3 columns: extra, content, navigation */
    .three_cols_el_cc_nr div#wrapper
    {
        float: left;
    }

    .three_cols_el_cc_nr div#content
    {
        margin: 0px 180px 0px 180px;
    }

    .three_cols_el_cc_nr div#navigation
    {
        float: left;
        margin-left: -180px;
    }

    .three_cols_el_cc_nr div#extra
    {
        float: left;
        margin-left: -100%;
    }

/* 3 columns: navigation, content, extra */
    .three_cols_nl_cc_er div#wrapper
    {
        float: left;
    }

    .three_cols_nl_cc_er div#content
    {
        margin: 0px 180px 0px 180px;
    }

    .three_cols_nl_cc_er div#navigation
    {
        float: left;
        margin-left: -100%;
    }

    .three_cols_nl_cc_er div#extra
    {
        float: left;
        margin-left: -180px;
    }

/* 3 columns: content, navigation, extra */
    .three_cols_cl_nc_er div#wrapper
    {
        float: left;
    }

    .three_cols_cl_nc_er div#content
    {
        margin: 0px 360px 0px 0px;
    }

    .three_cols_cl_nc_er div#navigation
    {
        float: left;
        margin-left: -360px;
    }

    .three_cols_cl_nc_er div#extra
    {
        float: left;
        margin-left: -180px;
    }

/* 3 columns: content, extra, navigation */
    .three_cols_cl_ec_nr div#wrapper
    {
        float: left;
    }

    .three_cols_cl_ec_nr div#content
    {
        margin: 0px 360px 0px 0px;
    }

    .three_cols_cl_ec_nr div#navigation
    {
        float: left;
        margin-left: -180px;
    }

    .three_cols_cl_ec_nr div#extra
    {
        float: left;
        margin-left: -360px;
    }

/* 3 columns: navigation, extra, content */
    .three_cols_nl_ec_cr div#wrapper
    {
        float: right;
    }

    .three_cols_nl_ec_cr div#content
    {
        margin: 0px 0px 0px 360px;
    }

    .three_cols_nl_ec_cr div#navigation
    {
        float: right;
        margin-right: -180px;
    }

    .three_cols_nl_ec_cr div#extra
    {
        float: right;
        margin-right: -360px;
    }

/* 3 columns: extra, navigation, content */
    .three_cols_el_nc_cr div#wrapper
    {
        float: right;
    }

    .three_cols_el_nc_cr div#content
    {
        margin: 0px 0px 0px 360px;
    }

    .three_cols_el_nc_cr div#navigation
    {
        float: right;
        margin-right: -360px;
    }

    .three_cols_el_nc_cr div#extra
    {
        float: right;
        margin-right: -180px;
    }

/* 2 columns versions: content, navigation */
    .two_cols_cl_nr div#wrapper
    {
        float: left;
    }

    .two_cols_cl_nr div#content
    {
        margin: 0px 180px 0px 0px;
    }

    .two_cols_cl_nr div#navigation
    {
        float: left;
        margin-left: -180px;
    }

    .two_cols_cl_nr div#extra
    {
        display: none;
    }

/* 2 columns versions: content, extra */
    .two_cols_cl_er div#wrapper
    {
        float: left;
    }

    .two_cols_cl_er div#content
    {
        margin: 0px 180px 0px 0px;
    }

    .two_cols_cl_er div#navigation
    {
        display: none;
    }

    .two_cols_cl_er div#extra
    {
        float: left;
        margin-left: -180px;
    }

/* 2 columns versions: navigation, content */
    .two_cols_nl_cr div#wrapper
    {
        float: left;
    }

    .two_cols_nl_cr div#content
    {
        margin: 0px 0px 0px 180px;
    }

    .two_cols_nl_cr div#navigation
    {
        float: left;
        margin-left: -100%;
    }

    .two_cols_nl_cr div#extra
    {
        display: none;
    }

/* 2 columns versions: extra, content */
    .two_cols_el_cr div#wrapper
    {
        float: left;
    }

    .two_cols_el_cr div#content
    {
        margin: 0px 0px 0px 180px;
    }

    .two_cols_el_cr div#navigation
    {
        display: none;
    }

    .two_cols_el_cr div#extra
    {
        float: left;
        margin-left: -100%;
    }

/* end of layout */
